<template>
  <div class="app-container">
    <main-panel>
      <div class="right">
        <el-button
          size="small"
          type="success"
          icon="el-icon-plus"
          @click="openAddDialog"
          >新增快递公司</el-button
        >
        <el-button
          size="small"
          type="primary"
          icon="el-icon-setting"
          @click="navSetting"
          >快递账号设置</el-button
        >
      </div>
    </main-panel>
    <div class="source">
      <el-table
        :data="list"
        v-loading.body="listLoading"
        element-loading-text="Loading"
        highlight-current-row
        size="small"
        style="width: 100%"
        max-height="450"
        :default-sort="{ prop: 'priority', order: 'descending' }"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="快递公司">
          <template slot-scope="scope">
            <el-input
              v-if="editId === scope.row.id"
              size="mini"
              v-model="scope.row.name"
              placeholder="请输入内容"
              @change="handleEdit(scope.$index, scope.row)"
            ></el-input>
            <span v-else>{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="快递公司编码">
          <template slot-scope="scope">
            <el-input
              v-if="editId === scope.row.id"
              size="mini"
              v-model="scope.row.express"
              placeholder="请输入内容"
              @change="handleEdit(scope.$index, scope.row)"
            ></el-input>
            <span v-else>{{ scope.row.express }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <el-button
              v-if="editId === scope.row.id"
              size="mini"
              type="success"
              :loading="saveLoading"
              @click.native.prevent="saveEdit(scope.row)"
              >保存</el-button
            >
            <el-button
              v-else
              size="mini"
              type="primary"
              @click.native.prevent="handleEdit(scope.$index, scope.row)"
              >修改</el-button
            >
            <el-popover
              placement="top"
              width="180"
              trigger="click"
              v-model="scope.row.delPopover"
            >
              <p>确定删除吗？</p>
              <div class="center">
                <el-button
                  size="mini"
                  type="primary"
                  @click="scope.row.delPopover = false"
                  >取消</el-button
                >
                <el-button
                  size="mini"
                  type="warning"
                  @click="handleDelete(scope.$index, scope.row)"
                  >确定</el-button
                >
              </div>
              <el-button slot="reference" type="danger" size="mini"
                >删除</el-button
              >
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <addPriority :addDialog.sync="addDialog"></addPriority>
  </div>
</template>

<script>
import { MainPanel } from '@/components'
import addPriority from '@/views/system/priority/add.vue'
import { getList, edit, handDelete } from '@/api/priority'
export default {
  name: 'priority',
  data() {
    return {
      editId: -1,
      listLoading: true,
      addDialog: false, // 新增
      saveLoading: false,
      list: []
    }
  },
  created() {
    this.fecthData()
  },
  components: {
    MainPanel,
    addPriority
  },
  methods: {
    fecthData() {
      getList().then((res) => {
        this.list = res.data
        this.listLoading = false
      })
    },
    handleEdit(index, row) {
      if (this.editId !== -1 && this.editId !== row.id) {
        this.$message.error('有数据正在修改，请先保存')
        return false
      } else {
        this.editId = row.id
      }
    },
    saveEdit(row) {
      edit(row)
        .then((res) => {
          this.$message({
            message: res.msg,
            type: 'success'
          })
          this.saveLoading = false
          this.editId = -1
        })
        .catch((res) => {
          this.editId = -1
          this.saveLoading = true
        })
    },
    handleDelete(index, row) {
      const that = this
      handDelete(row)
        .then((res) => {
          that.list.splice(index, 1)
          this.$message({
            message: res.msg,
            type: 'success'
          })
        })
        .catch((res) => {
          this.$message.error(res.msg)
        })
    },
    openAddDialog() {
      this.addDialog = true
    },
    navSetting() {
      this.$router.replace('/priority')
    }
  }
}
</script>

<style lang="scss" scoped>
.source {
  padding: 24px;
  border: 1px solid #ebebeb;
  border-radius: 3px;
  transition: 0.2s;
  margin-top: 24px;
}
.table {
  width: 100%;
}
// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 6px; // 纵向滚动条
}
// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}
.search-form {
  width: 100%;
  .el-input {
    width: 80%;
  }
  .el-select {
    width: 80%;
    .el-option {
      width: 100%;
    }
  }
  .search {
    width: 100%;
  }
  .line {
    text-align: center;
  }
}
.right {
  text-align: right;
}
.center {
  text-align: center;
}
</style>
